<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1"/>
<title>Concave Paths test</title>
<script>
var g_swapsBeforeAck = 15;

function main() {
  waitForFinish();
}

function waitForFinish()
{
  if (g_swapsBeforeAck == 0) {
    domAutomationController.send("SUCCESS");
  } else {
    g_swapsBeforeAck--;
    document.getElementById('paths').style.zIndex = g_swapsBeforeAck + 1;
    window.requestAnimationFrame(waitForFinish);
  }
}
</script>
</head>
<body onload="main()">
<svg id="paths" width="600" height="100">
  <defs>
    <path id="chomp" d="M100,75 A50,50 0 1 1 100,25 L50,50Z" fill="gold"/>
  </defs>
</g>
<use xlink:href="#chomp"/>
<g transform="translate(100, 0)">
  <use xlink:href="#chomp"/>
</g>
<g transform="translate(200, 0)">
  <use xlink:href="#chomp"/>
</g>
<g transform="translate(300, 0)">
  <use xlink:href="#chomp"/>
</g>
<g transform="translate(400, 0)">
  <use xlink:href="#chomp"/>
</g>
<g transform="translate(500, 0)">
  <use xlink:href="#chomp"/>
</g>
</svg>
</body>
</html>
